<template>
	<view>
		<view
			v-for="(item, index) in list"
			:key="index"
			class="item"
			@click="openDetail(item)">
			<view class="item-box flex align-center" :class="isBig ? '' : 'small'">
				<view class="item-left">
					<u--image 
						:width="size"
						:height="size"
						:src="item.image" 
						mode="aspectFill"></u--image>
				</view>
				<view 
					:style="{height: size}" 
					class="item-right flex-sub flex flex-direction justify-between">
					<view 
						class="title"
						:class="isBig ? 'text-cut2' : 'text-cut'">{{ item.title }}</view>
					<view class="flex align-center justify-between">
						<view>
							<text class="price">￥{{ item.price }}</text>
							<text class="origin-price">￥{{ item.marketprice }}</text>
						</view>
						<view @click.stop="seeStock(item)" class="icon-cha flex align-center justify-center">
							<u-icon name="eye" size="40rpx" color="#fff"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<sizePopup 
			v-if="showSize" 
			:show="showSize" 
			:detailId="detailId"
			@close="showSize = false" />
	</view>
</template>

<script>
	export default {
		name: "goodsItem",
		props: {
			list: Array,
			size: {
				type: String,
				default: '240rpx'
			},
			isBig: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				showSize: false,
				detailId: ''
			};
		},
		methods: {
			openDetail(item) {
				this.$common.openUrl('/packages/product/detail?id=' + item.id)
			},
			seeStock(item) {
				console.log(item)
				this.detailId = item.id
				this.showSize = true
			}
		}
	}
</script>

<style lang="scss" scoped>
.item {
	padding: 0 30rpx 30rpx;
	&-box {
		background: #fff;
		border-radius: 8rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		overflow: hidden;
		&.small {
			box-shadow: none;
			.item-right {
				padding: 0 0 0 30rpx;
			}
		}
	}
	&-right {
		font-size: 28rpx;
		padding: 30rpx;
		overflow: hidden;
		.title {
			font-size: 30rpx;
		}
		.price {
			color: #f00;
			font-size: 30rpx;
			font-weight: 500;
		}
		.origin-price {
			color: #999;
			font-size: 24rpx;
			margin-left: 10rpx;
			text-decoration: line-through;
		}
	}
	.icon-cha {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: $uni-defaultcolor;
		font-size: 30rpx;
	}
	.btn {
		padding: 30rpx 0;
	}
}
</style>